<script>
import CardVue from './作用域插槽--子.vue'

export default {
  components: { CardVue },
}
</script>

<template>
  <CardVue>
    <template v-slot:cardTitle
      ><!-- 向具名插槽提供内容 -->
      博客
    </template>

    <template #cardSubtitle>
      <i>百万博主分享经验</i>
    </template>

    <template #cardContent="dataProps"
      ><!-- 访问插槽中提供的数据 -->
      <ul>
        <li>{{ dataProps }}</li>
        <li>博客的标题：{{ dataProps.cardBlog.title }}</li>
        <li>博客的时间：{{ dataProps.cardBlog.time }}</li>
        <li>博主：{{ dataProps.cardAuthor }}</li>
      </ul>
    </template>

    <template #default>
      <!-- 向子组件默认插槽中提供内容 -->
      <button>关闭</button>
    </template>
  </CardVue>

  <hr />
  <CardVue v-slot="dataProps">
    <!-- 如果使用子组件时用到了 v-slot，则该子组件标签中将无法向其他具名插槽中提供内容 -->
    <!--
        <template #cardSubtitle>
            <i>百万博主分享经验</i>
        </template>
        -->
    <button>{{ dataProps.close }}</button>
    <button>{{ dataProps.sure }}</button>
  </CardVue>
</template>
